<template>
  <div>
    <p class="title">消息配置</p>
    <div class="main-div">
      <div class="content-wrap">
        <div class="content-title">消息通知</div>
        <div class="content-describe">预警消息将以站内弹窗的形式通知</div>
      </div>
      <div class="switch-wrap">
        <a-switch checked-children="开" un-checked-children="关" v-model="switchFlag" @change="onSwitchChange" />
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        switchFlag:true
      }
    },
     methods: {
      onSwitchChange(checked) {
        this.switchFlag = checked
        console.log("this.switchFlag",this.switchFlag);
      },
    }
  }
</script>

<style lang="less" scoped>
  .title {
    box-sizing: border-box;
    border-width: 1px;
    border-bottom: 1px solid rgba(233, 233, 233, 1);
    border-radius: 2px;
    font-weight: 650;
    font-style: normal;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.847058823529412);
    line-height: 50px;
    font-size: 16px;
  }
  .main-div{
    margin:24px;
    padding-bottom: 12px;
    border-width: 1px;
    border-bottom: 1px solid rgba(233, 233, 233, 1);
    border-radius: 2px;
    display: flex;
    align-items: center;
    .content-title {
      font-weight: 650;
      font-style: normal;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.847058823529412);
      font-size: 16px;
    }
    .content-describe{
      padding:12px;
      font-weight: 400;
      color:rgba(0, 0, 0, 0.447058823529412);
    }
    .content-wrap{
      width: calc(~'100% - 100px');
    }
    .switch-wrap{
      width:100px
    }
  }
</style>